<template>
  <!-- 作用域插槽 -->
  <div id="app" class="app">
    <ChaCao :dataList="foods" titleName="食物1">
      <!-- 废弃 -->
      <template scope="slotProps">
        <ul>
          <li v-for="(i, index) in slotProps.foods" :key="index">{{ i }}</li>
        </ul>
      </template>
    </ChaCao>
    <ChaCao :dataList="foods" titleName="食物2">
      <!-- 解构 -->
      <template scope="{foods}">
        <ol>
          <li style="color: red" v-for="(i, index) in foods" :key="index">
            {{ i }}
          </li>
        </ol>
      </template>
    </ChaCao>
    <ChaCao :dataList="foods" titleName="食物3">
      <!-- 新的写法1 -->
      <template slot-scope="slotProps">
        <h4 v-for="(i, index) in slotProps.foods" :key="index">{{ i }}</h4>
      </template>
    </ChaCao>
    <ChaCao :dataList="foods" titleName="食物4">
      <template v-slot="slotProps">
        <h4 v-for="(i, index) in slotProps.foods" :key="index">{{ i }}</h4>
      </template>
    </ChaCao>
  </div>
</template>

<script>
import ChaCao from "./components/ChaCao";
export default {
  name: "App",

  components: { ChaCao },

  methods: {
    getUserList() {},
  },
};
</script>

<style>
#app {
  display: flex;
  flex-direction: row;
  gap: 36px;
}
.aaa {
  display: flex;
  gap: 6;
  justify-content: space-between;
}
</style>